<template>
    <rx-dialog style="height: 100%;" @handOk="onOk" @cancel="cancel">

        <a-form  layout="vertical" class="rx-a-form-vertical">
            <a-form-item :label="i18n('customDialog.pageCustomTitle','页面定制')">
                <rx-input-button v-model="dialogVal"
                                 @click="selectCustomView"

                >
                </rx-input-button>
            </a-form-item>
            <a-form-item :label="i18n('customDialog.callbackmethod','回调方法')">
                <a-input v-model="config.callBack" :placeholder="i18n('customDialog.callBack','列表方法名,参数为')+'(action,data)'" ></a-input>
            </a-form-item>
            <a-form-item :label="i18n('customDialog.beforeMethod','前置方法')">
                <a-input v-model="config.preMethod" :placeholder="i18n('customDialog.preMethod','前置方法名称')" ></a-input>
            </a-form-item>
            <a-form-item :label="i18n2('form.openMode','打开方式')">
                <open-mode  :local-config="config" ></open-mode>
            </a-form-item>

            <a-form-item :label="i18n('list.paramConfig','参数配置')">
                    <a-table :dataSource="config.params" :pagination="false"
                         rowKey="idx_">
                    <a-table-column :title="i18n('customDialog.pageCustomParam','页面定制参数')" dataIndex="bindFieldLabel" width="150px">
                        <template slot-scope="text, record">
                            <a-form-item class="tableItems">
                                {{ record.bindFieldLabel }}
                            </a-form-item>
                        </template>
                    </a-table-column>
                    <a-table-column :title="i18n('customDialog.mappingMode','映射方式')" dataIndex="mappingMode" width="150px">
                        <template slot-scope="text, record">
                            <a-select v-model:value="record.mappingMode" :options="mappingList" style="width: 100%;"
                                      :getPopupContainer="p=>p.parentNode" @change="changeMappingMode(record)">
                            </a-select>
                        </template>
                    </a-table-column>
                    <a-table-column :title="i18n('customDialog.bindValue','绑定字段')" dataIndex="returnField" width="300px">
                        <template slot-scope="text, record">
                            <template v-if="record.mappingMode=='fixed'">
                                <a-input v-model:value="record.returnValue" style="width: 100%;" :placeholder="i18n('customDialog.fixedPlaceholer','请输入值')"></a-input>
                            </template>
                            <template v-else-if="record.mappingMode=='script'">
                                <a-input v-model:value="record.returnValue" style="width: 100%;" :placeholder="i18n('customDialog.scriptPlaceholer','请输入脚本方法名称')"></a-input>
                            </template>
                            <div v-else class="for-double">
                                <a-row v-if="record.valmode=='double'">
                                    <a-col :span="12">
                                        <a-form-item
                                            :label="i18n('customDialog.text','文本')"
                                            :labelCol="{span:6}"
                                            :wrapperCol="{span:15}"
                                            class="tableItems">
                                            <a-select style="width: 100%;" :placeholder="i18n('customDialog.text','文本')"
                                                      v-model="record.returnLabel"
                                                      :options="headerFields"
                                                      :getPopupContainer="p=>p.parentNode" allowClear>
                                            </a-select>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="12">
                                        <a-form-item
                                            :label="i18n('customDialog.value','值')"
                                            :labelCol="{span:6}"
                                            :wrapperCol="{span:15}"
                                            class="tableItems">
                                            <a-select style="width: 100%;" :placeholder="i18n('customDialog.value','值')"
                                                      v-model="record.returnValue"
                                                      :options="headerFields"
                                                      :getPopupContainer="p=>p.parentNode" allowClear>
                                            </a-select>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-form-item v-else
                                             class="tableItems">
                                    <a-select style="width: 100%;"
                                              v-model="record.returnValue"
                                              :defaultValue="record.returnValue"
                                              :options="headerFields"
                                              :getPopupContainer="p=>p.parentNode" allowClear>
                                    </a-select>
                                </a-form-item>
                            </div>
                        </template>
                    </a-table-column>
                </a-table>
            </a-form-item>
        </a-form>
    </rx-dialog>

</template>

<script>
import {RxDialog, Util} from "@lowcode/jpaas-common-lib";
import FormBoListApi from "@/api/form/core/formBoList";
import CustomViewDialog from "@/views/modules/form/core/dialog/CustomViewDialog";
import OpenMode from "@/views/modules/form/core/listCommon/OpenMode";

export default {
    name: "FormListOpenCustomDialog",
    components: {OpenMode},
    props: {
        layerid: {type: String},
        lydata: {type: Object},
        destroy: Function,
        //列表主键
        pkId: {type: String},
        //配置信息
        customConfig: {
            type: Object
        },
    },
    data() {
        return {
            labelCol: {span: 10},
            wrapperCol: {span: 14},
            boEntityShow: false,
            dialogVal: "",
            config: {
                alias: "",//alias
                name: "",//名称
                params:[],
                callBack:"",
                //窗口大小
                isMax:"YES",
                height:600,
                width:800
            },
            headerFields:[],
            //映射方式
            mappingList: [
                {value: "mapping", label:this.i18n('customDialog.field','字段')},
                {value: "script", label:this.i18n('customDialog.script','脚本')},
                {value: "fixed", label:this.i18n('customDialog.fixedVar','固定值')}
            ],
        }
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formBoList",key);
        },
        i18n2(name, text, key) {
            return this.$ti18(name, text, "formBoListDialog", key);
        },
        init() {
            //获取列表字段
            this.reloadColumns();
            this.config=this.customConfig;
            this.dialogVal = JSON.stringify({text: this.config.name, value: this.config.alias});
        },
        changeMappingMode(row) {
            row.table = "";
            row.bindVal = "",
            row.returnValue=""
        },
        selectCustomView(){
            var self_=this;
            var config = {
                curVm: this,
                widthHeight: ['800px', '600px'],
                component: CustomViewDialog,
                title: self_.i18n('customDialog.pageCustomTitle','页面定制'),
            };
            Util.open(config, function (action,data) {
                if (action != 'ok') return;
                data.name = this.$i18(data.name,"页面定制名国际化")
                self_.dialogVal = JSON.stringify({text: data.name, value: data.alias});
                self_.config.alias=data.alias;
                self_.config.name=data.name;
                //将旧的参数清空
                self_.config.params=[];
                if(data.params){
                   var params=JSON.parse(data.params);
                    for (let i = 0; i < params.length; i++) {
                        self_.config.params.push({
                            bindFieldLabel:params[i].value,
                            returnLabel:"",
                            returnValue:""
                        })
                    }
                }else {
                    self_.config.params=[];
                }
            })
        },
        reloadColumns() {
            let self_ = this;
            FormBoListApi.reloadColumns(this.pkId).then(res => {
                self_.headerFields = res.data.map(function (item) {
                    item.value = item.field;
                    item.label=item.header;
                    return item
                });
                self_.$forceUpdate();
            });
        },
        onOk() {
            Util.closeWindow(this, "ok", this.config);
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
    },

}
</script>

<style scoped>
.for-double>>>.ant-form-item{
    padding: 0px!important;
    margin: 0px!important;
}
</style>
